<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
    <style>
        div {
            display: none;
            width: 200px;
            height: 100px;
            margin: 50px auto;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <h2></h2>
    <div></div>
    <input type="button" value="停止计时" id="btn">
    <script>
        //1秒后，div显示出来
        //time1 定时器标识符
        // setTimeout(function(){
        //     var div=document.querySelector('div')
        //     div.style.display='block';
        // },1000);//1000毫秒=1秒
        var time1 = setTimeout(function () {
            var div = document.querySelector('div');
            div.style.display = 'block';
        }, 5000);
        document.querySelector('#btn').onclick = function () {
            clearTimeout(time1);
        }

        //在h2显示系统当前时间
        setInterval(showTime, 1000);
        function showTime() {
            var now = new Date();
            var h2 = document.querySelector("h2");
            h2.innerHTML = now.toDateString() + ' ' + now.toTimeString();
        }
        showTime();
    </script>

    <!-- <script>
        window.onresize=function(){
            console.log()
        }
    </script> -->
</body>

</html>